<template>
  <div class="app-container">
    <div class="base-info">
      <!--搜索-->
      <el-form :inline="true" :model="queryData">
        <el-form-item label="应用ID">
          <el-input v-model="queryData.appKey" placeholder="应用ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryClick">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAppClick">创建应用</el-button>
        </el-form-item>
      </el-form>
      <!--数据表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="appKey"
          label="应用ID"
        >
        </el-table-column>
        <el-table-column
          prop="appKey"
          label="秘钥管理"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showKeys(scope.row)">修改/查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status===1" class="success">
              启用
            </div>
            <div v-else class="danger">
              禁用
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="创建时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="enterClick(scope.row)">进入</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pageIndex"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
      </el-pagination>
      <!--查看公私钥对话框-->
      <el-dialog
        :visible.sync="keysDlgViewShow"
      >
        <span slot="title">
          配置公钥
        </span>
        <router-link target="_blank" to="/help?id=keys">
          <el-button type="text" icon="el-icon-question">公私钥介绍</el-button>
        </router-link>
        <fieldset>
          <el-alert class="el-alert-tip" :type="keysTipsType" :closable="false">
            <span slot="title">{{ keysTitle }} <el-link :underline="false" type="primary" @click="reUploadPublicKey">重新生成</el-link></span>
          </el-alert>
          <fieldset>
            <legend>应用公钥</legend>
            <div class="key-content"> {{ isvKeysData.publicKeyIsv }}</div>
          </fieldset>
          <fieldset>
            <legend>应用私钥</legend>
            <div class="key-content"> {{ isvKeysData.privateKeyIsv }}</div>
          </fieldset>
        </fieldset>

        <br>
        <fieldset>
          <fieldset>
            <legend>平台公钥</legend>
            <div class="key-content"> {{ isvKeysData.publicKeyPlatform }}</div>
          </fieldset>
          <!--<fieldset>-->
          <!--<legend>平台私钥</legend>-->
          <!--<div class="key-content"> {{ isvKeysData.privateKeyPlatform }}</div>-->
          <!--</fieldset>-->
        </fieldset>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="reloadKesBtnShow" :loading="keysBtnLoading" type="primary" @click="reloadKeys">保 存
          </el-button>
          <el-button @click="keysDlgViewShow = false">关 闭</el-button>
        </div>
      </el-dialog>
      <!--创建应用对话框-->
      <el-dialog :visible.sync="addDlgViewShow">
        <span slot="title">
          创建应用
        </span>
        <fieldset>
          <el-form
            ref="appForm"
            :model="createData"
          >
            <el-form-item prop="remark" :rules="[{ required: true, message: '请填写应用备注', trigger: 'blur' }]"
                          label="应用备注">
              <el-input
                v-model="createData.remark"
                type="text"
                :rows="5"
                placeholder="应用备注，用户标记应用信息，例如：上门应用"
              />
            </el-form-item>
          </el-form>
        </fieldset>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="keysBtnLoading" type="primary" @click="onCreateApp">保 存</el-button>
        </div>
      </el-dialog>
      <!--编辑应用对话框-->
      <el-dialog :visible.sync="editDlgViewShow">
        <span slot="title">
          应用信息
        </span>
        <fieldset>
          <el-form
            ref="appEditForm"
            :model="editData"
          >
            <el-form-item prop="remark" :rules="[{ required: true, message: '请填写应用备注', trigger: 'blur' }]"
                          label="应用备注">
              <el-input
                v-model="editData.remark"
                type="text"
                :rows="5"
                placeholder="应用备注，用户标记应用信息，例如：上门应用"
              />
            </el-form-item>
            <el-form-item prop="status" label="应用状态">
              <el-switch v-model="editData.status"></el-switch>
            </el-form-item>
          </el-form>
        </fieldset>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="keysBtnLoading" type="primary" @click="onEditApp">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        reloadKesBtnShow: false,
        keysDlgViewShow: false,
        addDlgViewShow: false,
        keysBtnLoading: false,
        editDlgViewShow: false,
        dataTotal: 0,
        tableData: [],
        queryData: {
          appKey: '',
          pageIndex: 1,
          pageSize: 10,
        },
        createData: {
          remark: ''
        },
        editData: {
          id: 0,
          remark: '',
          status: false
        },
        isvKeysData: {
          appKey: '',
          publicKeyIsv: '',
          privateKeyIsv: '',
          publicKeyPlatform: '',
          privateKeyPlatform: ''
        },
        keysTitle: '应用公/私钥已配置',
        keysTipsType: 'success'
      }
    },
    methods: {
      //初始化应用列表
      loadApps: function () {
        this.get('/portal/isv/getIsvList', this.queryData, (resp) => {
          this.tableData = resp.data.list
          this.dataTotal = resp.data.total
        })
      },
      //搜索
      queryClick() {
        this.loadApps();
      },
      //创建应用按钮
      addAppClick() {
        this.addDlgViewShow = true
      },
      //创建应用保存
      onCreateApp() {
        this.$refs.appForm.validate(valid => {
          if (valid) {
            this.keysBtnLoading = true
            this.post('/portal/isv/createIsv', this.createData, (resp) => {
              this.addDlgViewShow = false
              this.keysBtnLoading = false
              this.tipSuccess("操作成功")
              this.loadApps()
              this.createData.remark = ''
            }, resp => {
              this.keysBtnLoading = false
              this.tipError(resp.msg)
            })
          }
        })
      },
      //查看秘钥
      showKeys(row) {
        //加载秘钥信息
        this.get('/portal/isv/getIsvKeys', {appKey: row.appKey}, (resp) => {
          Object.assign(this.isvKeysData, resp.data)
          this.keysDlgViewShow = true
        })

      },
      //重新生成秘钥
      reUploadPublicKey() {
        //获取重新生成的公钥
        this.get('/portal/isv/getPublicKeyIsv', {}, (resp) => {
          this.isvKeysData.publicKeyIsv = resp.data.publicKeyIsv
          this.isvKeysData.privateKeyIsv = resp.data.privateKeyIsv
          this.reloadKesBtnShow = true
          this.keysTitle = '应用公/私钥已重新生成，保存后才生效'
          this.keysTipsType = 'warning'
        })
      },
      //重新生成秘钥保存
      reloadKeys() {
        this.keysBtnLoading = true
        //保存操作
        this.post('/portal/isv/resetPublicKeyIsv', {
          appKey: this.isvKeysData.appKey,
          publicKeyIsv: this.isvKeysData.publicKeyIsv,
          privateKeyIsv: this.isvKeysData.privateKeyIsv
        }, (resp) => {
          this.keysDlgViewShow = false
          this.reloadKesBtnShow = false
          this.keysTitle = '应用公/私钥已配置'
          this.keysTipsType = 'success'
          this.keysBtnLoading = false
          this.tipSuccess("操作成功")
        }, resp => {
          this.keysBtnLoading = false
          this.tipError(resp.msg)
        })
      },
      //编辑按钮
      editClick(row) {
        this.editDlgViewShow = true
        this.get('/portal/isv/getIsvInfo', {id: row.id}, (resp) => {
          this.editData = resp.data
        }, resp => {
          this.tipError(resp.msg)
        })
      },
      onEditApp() {
        this.$refs.appEditForm.validate(valid => {
          if (valid) {
            this.keysBtnLoading = true
            this.post('/portal/isv/updateIsv', this.editData, (resp) => {
              this.editDlgViewShow = false
              this.keysBtnLoading = false
              this.tipSuccess("操作成功")
              this.loadApps()
              this.editData.remark = ''
              this.editData.status = false
            }, resp => {
              this.keysBtnLoading = false
              this.tipError(resp.msg)
            })
          }
        })
      },
      //删除按钮
      deleteClick(row) {
        const h = this.$createElement;
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '确定删除应用 '),
            h('i', {style: 'color: #F56C6C'}, row.appKey),
            h('span', null, ' 吗?')
          ]),
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              //删除操作
              this.post('/portal/isv/deleteIsv', {appKey: row.appKey}, resp => {
                instance.confirmButtonLoading = false
                done();
                this.loadApps()
              }, resp => {
                done();
                instance.confirmButtonLoading = false
                this.tipError(resp.msg)
              })
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
        }).catch((err) => {

        });
      },
      //进入应用
      enterClick(row) {
        sessionStorage.removeItem("appKey");
        sessionStorage.removeItem("isvId");
        sessionStorage.setItem('appKey', row.appKey);
        sessionStorage.setItem('isvId', row.id);
        this.goRoute(this.redirect || '/dashboard')
      },
      //分页每页展示数更换
      handleSizeChange(val) {
        this.queryData.pageSize = val
        this.loadApps()
      },
      //页数更换
      handleCurrentChange(val) {
        this.queryData.pageIndex = val
        this.loadApps()
      }
    }, created() {
      this.loadApps()
    }
  }
</script>
